Creating Sub Menus in Fireworks

Here's what you need to do to create sub-menus from your drop-menus.

Step 1. Open your .png template in Fireworks and 'show' all the slices by selecting 'layers > web layer'. All your slices will be highlighted in light green.

Step 2. Select the navigation button with the drop-menu you wish to edit by clicking on it , e.g. services. This will now have a green border around the button and drop-menu.

Step 3. Double click on any of the drop-menu cells. The 'Set Pop-Up Menu' box will appear.

Step 4. In the text field, enter the name of your first drop menu.

In the example above, we have entered 'services'. You can also add the link of the text in the link field. Click the + button above to enter this first drop-menu item in your list.

Step 5. Next, for the sub-menu listing, enter a new name in the text box, e.g, Web Design, add the link url and this time click on the 'indent menu' box at the top, near the + and - boxes. This will indent the selected menu item and will be placed beneath the 'services' menu listing.

Repeat step 5 to add more sub-menus. If you wish to add more menu items in the same drop-menu repeat steps 1 to 4, but this time ensure that the menu item selected is 'outdented' from the 'outdent menu' box. Click next to preview the drop-menu with sub-menus and click in 'finish'.

If the drop-menus seem out of alignment beneath the navigation buttons, you can click on the menu to drag it until you feel that it is correctly aligned.

Step 6. Preview the .png template in I.E. from Fireworks, by choosing 'file > preview in browser'.

Once you preview the menu and submenus in the browser (from Fireworks) in IE (click View /Source).....scroll up till you find the function 'fwLoadMenus' - copy the code from there to the same code found in the Dreamweaver template. Don't export the entire layout, only preview the code in the browser and cut and paste the code to the Dreamweaver template.

Alternatively, try to figure out the following code for the below navigation:

Navigation

Services
       Web Design (submenu)
       Programming (submenu)
       Domain Registration (submenu)
Products

<script language="JavaScript">
<!--
function fwLoadMenus() {
if (window.fw_menu_0) return;
window.fw_menu_0_1 = new Menu("Services",138,17,"Verdana, Arial, Helvetica, sans-serif",10,"#92191d","#dba753","#dba753","#92191d");
fw_menu_0_1.addMenuItem("Web Design");
fw_menu_0_1.addMenuItem("Programming");
fw_menu_0_1.addMenuItem("Domain Registration");
fw_menu_0_1.hideOnMouseOut=true;
window.fw_menu_0 = new Menu("root",71,17,"Verdana, Arial, Helvetica, sans-serif",10,"#92191d","#dba753","#dba753","#92191d");
fw_menu_0.addMenuItem(fw_menu_0_1);
fw_menu_0.addMenuItem("Products");
fw_menu_0.hideOnMouseOut=true;
fw_menu_0.childMenuIcon="arrows.gif";

fw_menu_0.writeMenus();
} // fwLoadMenus()

//-->
</script>

We just made a sample drop down menu and got the code from previewing it in the browser (from Fireworks)

Remember all you need to do is copy paste the code to the Dreamweaver template. Don't export the entire template. Find the same function in the Dreamweaver template and replace it with the above code.

Click here to learn how to create drop menus in Fireworks...

Home | About Us | Value Pack | Templates | What's New | Resources | Contact Us | Private Policy